<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>inner</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">

	<script src="js/json3.min.js"></script>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<script src="js/support.js"></script>
	<script src="js/stacktrace.js"></script>
	<script src="js/purl.js"></script>
	<script src="js/template.js"></script>

	<script src="js/options.js"></script>
	<script src="js/chat.js"></script>

	<script src="cfg/labelTypeDefine.js"></script>

	<style type="text/css">
		body {
			background: #cacaca;
		}

		#lstMain {
			list-style: none;
			padding-left: 0;
			overflow: auto;
			overflow-x: hidden;
			background: #909090;
			margin: 0;
		}

		#lstMain .chat_line {
			margin-bottom: 10px;
			display: none;
		}

		.uname {
			cursor: pointer;
		}

		#Sender {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 0;
			margin: 0;
		}
	</style>
</head>
<body>
<ul id="lstMain">

</ul>
<div id="Sender">
	<form id="frmSender" class="form-inline">
		<table id="tblSender">
			<tr>
				<td id="tabChannelSwitch" colspan="4"></td>
			</tr>
			<tr>
				<td width="200">
					<label for="txtMessage" style="white-space: nowrap">发送消息：</label>
				</td>
				<td width="100" style="white-space:nowrap">
					<select id="optChannel"></select>
				</td>
				<td width="100%">
					<input id="txtMessage" type="text" placeholder="发送内容……" name="content" style="width: 100%"/>
				</td>
				<td width="100">
					<input type="submit" class="btn btn-primary btn-sm" value="发送" style="display: inline-block;"/>
				</td>
			</tr>
		</table>
	</form>
</div>
<div class="hide">
	<script type="text/template" id="chat_line">
		<li class="chat_line channel_{%channel.id%}">
			<span class="label label-{%channel.type%}">{%channel.name%}</span>
			<code id="{%user.id%}" class="uname label-{%user.type%}">{%user.name%}</code>
			<span class="content">{%content%}</span>
		</li>
	</script>
</div>
<script type="text/javascript">
	var line_template = $('#chat_line').html();
	var button_list = {};

	(function (window){
		var button_template = $('<a class="sel btn btn-default btn-sm"/>');
		var channel_select = $('#optChannel');
		var selVis = $('#tabChannelSwitch');
		var txtMessage = $('#txtMessage');
		var lstMain = $('#lstMain');
		var style = '';
		
		$(function (){
			$(window).resize(function (){
				// 调整列表高度
				lstMain.css('height', $('#Sender').offset().top);
			});
			$(window).resize();
		});
		channel_select.on('change',function(){
			if( $(this).val()==CHANNEL_ID_PRIMARY ){
				txtTargetUser.show();
				txtTargetUser.parent().attr('width','400');
			}else{
				txtTargetUser.val('').hide();
				txtTargetUser.parent().attr('width','200');
			}
		});

		button_list.all = button_template.clone().data('label', undefined).text('全部');

		for(var id in labelTypeDefine){
			// 生成 系统、世界、私聊 等按钮
			button_list[id] = ChannelButton(id);
			// 点击切换时依赖的css
			style += '#lstMain.show-' + id + ' .chat_line.channel_' + id + '{display:list-item;}\n';
			// 所有channel都显示的时候的样式
			style += '#lstMain.show-all .chat_line.channel_' + id + '{display:list-item;}\n';
			style += '#lstMain.show-' + id + ' .chat_line.channel_' + id + '{display:list-item;}\n';

			if(id == 0){
				continue;
			}
			// 用户可以发送的频道，添加到select里
			ChannelOption(id);

			/* ！调试！ */
			// addChatMessage(id, 1, '调试', '频道 ' + id + ':' + labelTypeDefine[id]['name'] + ' 测试信息！' + (new Date()))
		}
		button_template.clone().data('label', 'show-all').text('全部').prependTo(selVis);

		lstMain.addClass('show-all');
		setStylesheet('channelselect', style);

		$('#frmSender').submit(function frmSenderSubmit(){
			newPost(intval(channel_select.val()), txtMessage.val());
			txtMessage.val('').focus();
			return false;
		});

		selVis.on('click', '.sel', function (){
			var label = $(this).data('label');
			var b = lstMain[0];
			b.className = b.className.replace(/show\-.*/g, '');
			lstMain.addClass(label);

			if($(this).data('user_send')){
				channel_select.val($(this).data('id'));
			}
		});

		function ChannelButton(channel_id){
			return button_template.clone()
					.data({'id':channel_id,'label': 'show-' + channel_id,'user_send': labelTypeDefine[channel_id]['user_send']})
					.text(labelTypeDefine[channel_id]['name'])
					.appendTo(selVis);
		}
		function ChannelOption(channel_id){
			return $('<option/>').attr('value', channel_id)
				.text(labelTypeDefine[channel_id]['name'])
				.appendTo(channel_select);
		}
	})(window);

</script>

</body>
</html>
